<template>
  <d2-container>
    <div class="pt-5">
      <el-form :model="form" label-width="100px" ref="form">
        <div style="width: 45%;">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="标题"></el-input>
          </el-form-item>
        </div>
        <div style="width: 45%;">
          <el-form-item label="简介" prop="describe">
            <el-input type="textarea" v-model="form.describe" placeholder="简介"></el-input>
          </el-form-item>
        </div>
        <div style="width: 18%;">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" placeholder="排序"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="分类" prop="category">
          <el-select v-model="form.category" placeholder="请选择分类">
            <el-option v-for="category in categories" :key="category.id" :label="category.name"
              :value="category.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面图片" prop="cover_image">
          <div>
            <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="headersobj">
              <img v-if="form.cover_image" :src="form.cover_image" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <div style="width: 80%;height: 500px;">
          <el-form-item label="内容" prop="content">
            <d2-quill v-model="form.content" />
          </el-form-item>
        </div>
        <div class="row" style="width: 80%;">
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存并提交</el-button>
          </el-form-item>
        </div>
      </el-form>

    </div>
  </d2-container>
</template>

<script>
  import {
    imagesUploadUrl,
  } from '@/utils/interface'
  import {
    technicalCategoryListUrl,
    technicalDetailUrl,
    technicalCreateUrl,
    technicalUpdateUrl,
  } from '@/utils/technicaldoc'
  import {
    baseURL
  } from '@/utils/request'
  import d2Quill from '@/components/d2-quill'
  import util from '@/libs/util'
  export default {
    components: {
      d2Quill
    },
    data() {
      return {
        form: {
          title: '',
          describe: '',
          content: '',
          category: '',
          cover_image: '',
          sort: ''
        },
        actionUrl: baseURL + imagesUploadUrl,
        categories: [],
        editor: null,
        toolbarConfig: {},
        editorConfig: {
          placeholder: '请输入内容...'
        },
        mode: 'default', // or 'simple'
        addNewsStatu: true,
        getTechnicalId: '',
        headersobj: null,
      }
    },
    created() {
      this.$get(technicalCategoryListUrl).then(res => {
        this.categories = res.data.data.list
      })
    },
    mounted() {
      if (this.$route.query.technicalId) {
        this.getTechnicalId = this.$route.query.technicalId
        this.getTechnicalDetail(this.getTechnicalId)
        this.addNewsStatu = false
      }
      this.headersobj = {
        Authorization: 'Bearer ' + util.cookies.get('token')
      }
    },
    methods: {
      getTechnicalDetail(newsId) {
        this.$get(technicalDetailUrl + newsId + '/').then(res => {
          if (res.data.code == 200) {
            this.form = {
              title: res.data.data.title,
              describe: res.data.data.describe,
              content: res.data.data.content,
              category: res.data.data.category,
              cover_image: res.data.data.cover_image,
              sort: res.data.data.sort
            }
          }
        })
      },
      submitForm(e) {
        if (!this.addNewsStatu) {
          this.$put(technicalUpdateUrl + this.getTechnicalId + '/', this.form).then(res => {
            if (res.data.code = 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        } else {
          this.$post(technicalCreateUrl, this.form).then(res => {
            this.form = {}
            this.openPrompt()
            setTimeout(() => {
              this.$router.go(-1)
            }, 300) // 延迟1秒执行
          })
        }

      },
      handleAvatarSuccess(val) {
        this.form.cover_image = val.data.url
      },
      beforeAvatarUpload() {

      },
      openPrompt() {
        this.$message({
          message: '添加文章成功',
          type: 'success'
        });
      },
    }
  }
</script>

<style lang="scss">
  .ql-container {
    width: 100%;
    height: 400px;
  }
</style>
